<template>
  <div class="contentDiv">
    <a-button type="primary" @click="showModal" class="mb-8">新增</a-button>
    <a-button @click="onEdit" class="mb-8" style="margin-left: 20px"
      >编辑</a-button
    >

    <a-table
      class="mb-8"
      :dataSource="tableData"
      :columns="tableColumns"
      :pagination="false"
    />
    <a-pagination
      v-model:current="pageCurrent"
      v-model:page-size="pageSize"
      :page-size-options="pageSizeOptions"
      show-quick-jumper
      :total="pageTotal"
      @change="onChange"
      @showSizeChange="onShowSizeChange"
    />
    <div style="margin: 20px; width: 300px">
      <TreeDrag />
    </div>

    <a-modal
      :visible="visibleModal"
      title="新增"
      @ok="handleOk"
      :confirmLoading="submitLoading"
      @cancel="handleCancel"
      ok-text="确认"
      cancel-text="取消"
      :destroyOnClose="true"
      :centered="true"
      :maskClosable="false"
    >
      <a-form
        ref="formRef"
        :model="formState"
        :rules="rules"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
      >
        <a-form-item label="用户名" name="username">
          <a-input v-model:value="formState.username" />
        </a-form-item>

        <a-form-item label="密码" name="password">
          <a-input-password v-model:value="formState.password" />
        </a-form-item>

        <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
          <a-checkbox v-model:checked="formState.remember">记住密码</a-checkbox>
        </a-form-item>

        <a-form-item label="上传文件" name="download">
          <a-spin :spinning="uploadSpinning">
            <a-upload
              :file-list="fileList"
              :multiple="true"
              :before-upload="beforeUpload"
              @remove="handleRemove"
            >
              <a-button>
                <upload-outlined></upload-outlined>
                上传文件
              </a-button>

              <template #iconRender><folder-open-outlined /></template>
            </a-upload>
          </a-spin>
        </a-form-item>

        <a-form-item label="城市" name="selectValue">
          <a-select
            ref="select"
            v-model:value="selectValue"
            placeholder="选择城市"
            style="width: 120px"
            show-search
            :options="selectOptions"
            :filter-option="filterOption"
            @change="selectChange"
          >
            <!-- <a-select-option
              :value="item.value"
              v-for="item in selectOptions"
              :key="item.value"
              >{{ item.label }}</a-select-option
            > -->
          </a-select>
        </a-form-item>

        <a-form-item label="日期" name="dateValue">
          <a-range-picker
            v-model:value="formState.dateValue"
            @change="dateChange"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { UploadOutlined } from "@ant-design/icons-vue";
import { onMounted, reactive, ref, getCurrentInstance } from "vue";
import TreeDrag from "./tree.vue";
import UploadFile from "@/components/uploadFile/index.vue";
const { proxy } = getCurrentInstance();
import dayjs, { Dayjs } from "dayjs";
import { message } from "ant-design-vue";
const formState = reactive({
  username: "",
  password: "",
  remember: true,
  uploadFileList: [],
  selectValue: undefined,
  dateValue: undefined,
});

let download = async (_rule, value) => {
  console.log(uploadFlag.value);
  if (uploadFlag.value === false) {
    return Promise.reject("请上传文件");
  } else {
    return Promise.resolve();
  }
};

const rules = {
  username: {
    required: true,
    min: 3,
    max: 36,
    message: "用户名长度需为3~36之间",
  },
  password: {
    max: 22,
    min: 6,
    required: true,
    pattern: new RegExp(
      /((?=.*\d)(?=.*\D)|(?=.*[a-zA-Z])(?=.*[^a-zA-Z]))(?!^.*[\u4E00-\u9FA5].*$)^\S{6,22}$/
    ),
    message: "密码至少包含数字，字母和字符的两种组合，长度在6-22之间",
  },
  uploadFileList: {
    required: true,
    message: "请上传文件",
  },
  download: {
    required: true,
    validator: download,
    trigger: "change",
  },
  selectValue: {
    required: true,
    message: "请选择城市",
    trigger: "change",
  },
  dateValue: {
    required: true,
    message: "请选择日期",
    trigger: "change",
  },
};

const visibleModal = ref(false);
const submitLoading = ref(false);
const formRef = ref();
//modal框方法
const handleOk = () => {
  submitLoading.value = true;
  formRef.value
    .validate()
    .then(() => {
      submitLoading.value = false;
      visibleModal.value = false;
    })
    .catch((error) => {
      console.log("error", error);
      submitLoading.value = false;
    });
};
const handleCancel = () => {
  visibleModal.value = false;
};
const showModal = () => {
  visibleModal.value = true;
};

//上传文件方法
const uploadSpinning = ref(false);
const fileList = ref([]);
const handleRemove = (file) => {
  const index = fileList.value.indexOf(file);
  const newFileList = fileList.value.slice();
  newFileList.splice(index, 1);
  fileList.value = newFileList;
  formState.uploadFileList = newFileList;
  if (fileList.value.length == 0) {
    uploadFlag.value = false;
  }
};
const uploadFlag = ref(false);
const beforeUpload = (file) => {
  uploadSpinning.value = true;
  let dir = "temp/lw/" + "testVue3/" + "/";
  uploadFlag.value = true;
  proxy.$globalFun
    .ossUploadUrl(file, file.name, file.uid, "packageId", dir)
    .then((obj) => {
      obj.uid = obj.id;
      obj.status = "done";
      fileList.value.push(obj);
      formState.uploadFileList = fileList.value;
      uploadSpinning.value = false;
    });

  return false;
};

//表格 分页
const tableData = ref([
  {
    key: "1",
    name: "zhang",
    age: 32,
    address: "西湖区湖底公园1号",
  },
  {
    key: "2",
    name: "li",
    age: 42,
    address: "西湖区湖底公园1号",
  },
]);

const tableColumns = ref([
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "年龄",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "住址",
    dataIndex: "address",
    key: "address",
  },
]);

const pageCurrent = ref(1);
const pageSize = ref(10);
const pageTotal = ref(60);
const pageSizeOptions = ref(["10", "20", "30", "40", "50"]);

const onShowSizeChange = (current, size) => {
  console.log(current, size);
  // pageSize.value = size;
  console.log(pageSize.value);
};

const onChange = (pageNumber) => {
  console.log("Page: ", pageNumber);
  console.log("pageSize: ", pageSize.value);
  pageCurrent.value = pageNumber;
};

//选择器
const selectOptions = ref([
  {
    value: "1",
    label: "Jack",
  },
  {
    value: "2",
    label: "Lucy",
  },
]);
// const selectValue = ref(undefined);
const filterOption = (input, option) => {
  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
const selectChange = (value) => {
  formState.selectValue = value;
};

//日期选择器
const dateChange = (value) => {
  if (value) {
    console.log(dayjs(value[0]).format("YYYY-MM-DD"));
    console.log(dayjs(value[1]).format("YYYY-MM-DD"));
  }

  // formState.dateValue = value;
  // console.log(formState.dateValue.value);
};
const onEdit = () => {
  message.destroy();
  message.success("This is a normal message");
};
</script>

<style lang="scss" scoped>
.contentDiv {
  padding: 20px;
}
</style>
